<script setup>
import { Message, MessageBox } from 'element-ui';
import { getContractM, deleteUploadFile, addFile, editFile, getDownloadPath } from '@/api/index.js';
import { useRequest, useWatch, useFileUrlDownload } from '@/hooks';
import { useGlobalState } from '@/store/globalState.js';
import { TableList } from '@/components/MainComponents.js';
import UploadFile from './UploadFile.vue';

const props = defineProps({
  type: { type: String, default: () => '' },
  enterprise: { type: Object, default: () => null },
});
const queryForm = ref({
  enterpriseCode: props.enterprise?.enterpriseCode,
  projectType: props.type,
  pageSize: 10,
  pageNum: 1,
});
const dialogData = ref({
  open: false,
  open2: false,
  title: '',
});
const openUrl = ref('');
const formData = ref(null);
const submitNum = ref(0);
const fileLists = ref(null);
const [res, loading, run] = useRequest(getContractM, {
  manual: true,
});
const [, , addRun] = useRequest(addFile, {
  manual: true,
  onSuccess: res => {
    if (res.msg === '操作成功') {
      Message.success(res.msg);
      run(queryForm.value);
      cancel();
    } else {
      Message.error(res.msg);
    }
  },
});
const [, , editRun] = useRequest(editFile, {
  manual: true,
  onSuccess: res => {
    if (res.msg === '操作成功') {
      Message.success(res.msg);
      cancel();
      run(queryForm.value);
    } else {
      Message.error(res.msg);
    }
  },
});
const [, , deleteRun] = useRequest(deleteUploadFile, {
  manual: true,
  onSuccess: res => {
    if (res.msg === '操作成功') {
      Message.success(res.msg);
      run(queryForm.value);
    } else {
      Message.error(res.msg);
    }
  },
});
const handleEdit = row => {
  dialogData.value.open = true;
  dialogData.value.title = '编辑';
  formData.value = row;
};
const handleDelete = row => {
  MessageBox.confirm('删除后不可找回，是否确认删除', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  })
    .then(() => {
      deleteRun(row.id);
    })
    .catch(() => {});
};
const columObj = ref({
  index: true,
  columnData: [
    {
      slotName: 'fileName',
      label: '附件文件',
    },
    {
      text: true,
      prop: 'fileType',
      label: '档案类型',
    },
    {
      text: true,
      prop: 'fileInfo',
      label: '文件说明',
    },
    {
      text: true,
      prop: 'uploadTimeStr',
      label: '上传时间',
    },
    {
      text: true,
      prop: 'enterpriseName',
      label: '上传用户',
    },
    {
      slotName: 'operat',
      label: '操作',
      // operations: [
      //   {
      //     type: 'text',
      //     label: '编辑',
      //     buttonClick: handleEdit,
      //   },
      //   {
      //     type: 'text',
      //     label: '删除',
      //     buttonClick: handleDelete,
      //   },
      //   {
      //     type: 'text',
      //     label: '下载',
      //     buttonClick: handleDownload,
      //   },
      // ],
    },
  ],
});
const getList = e => {
  queryForm.value.pageNum = e.page;
  queryForm.value.pageSize = e.limit;
  run(queryForm.value);
};
const handleUpload = () => {
  dialogData.value.open = true;
  dialogData.value.title = '上传';
  formData.value = null;
};
const cancel = () => {
  dialogData.value.open = false;
  formData.value = null;
};
const saveUpload = () => {
  submitNum.value = submitNum.value + 1;
};
const handleSuccess = params => {
  // fileLists.value = params;
  if (dialogData.value.title === '上传') {
    addRun({ ...params, projectType: props.type, enterpriceCode: props.enterprise?.enterpriseCode ?? '' });
  } else {
    editRun({ id: params.id, fileInfo: params.fileInfo, fileType: params.fileType });
  }
};
const showFile = async row => {
  dialogData.value.open2 = true;
  const url = await getDownloadPath(row?.fileUrl);
  openUrl.value = useGlobalState().globalState.fileUrl + url?.data?.url;
};
const downloadEx = async row => {
  const url2 = await getDownloadPath(row?.fileUrl);
  useFileUrlDownload(useGlobalState().globalState.fileUrl + url2?.data?.url, row.fileName);
};
useWatch(
  () => props.enterprise,
  n => {
    if (n) {
      queryForm.value.enterpriseCode = n?.enterpriseCode;
      run(queryForm.value);
    }
  },
  { deep: true, immediate: true },
);
</script>
<template>
  <div class="contBox u-h100" style="margin-top: 0">
    <div class="u-df-spb mb20">
      <span></span>
      <el-button type="primary" plain size="small" @click="handleUpload">上传文件</el-button>
    </div>
    <TableList
      v-loading="loading"
      :total="res?.total ?? 0"
      :height="410"
      :tableData="res?.rows"
      :pageObj="queryForm"
      :columObj="columObj"
      @getList="getList"
    >
      <template v-slot:fileName="{ scope }">
        <span class="u-primary cursor" @click="showFile(scope.row)">{{ scope.row.fileName }}</span>
      </template>
      <template v-slot:operat="{ scope }">
        <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
        <el-button size="small" type="text">
          <span class="u-primary" @click="downloadEx(scope.row)" download>下载</span>
        </el-button>
      </template>
    </TableList>
    <el-dialog :visible.sync="dialogData.open" width="40%" :before-close="cancel" append-to-body>
      <div slot="title" class="dialog-title">
        <span class="tit">
          {{ dialogData.title }}-
          <span class="u-prim-text">文件</span>
        </span>
      </div>
      <UploadFile
        :title="dialogData.title"
        :submit="submitNum"
        :cancel="dialogData.open"
        :formData="formData"
        @handleSuccess="handleSuccess"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel" type="primary" plain>取 消</el-button>
        <el-button type="primary" size="small" @click="saveUpload">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="附件内容"
      top="50px !important"
      :visible="dialogData.open2"
      @close="dialogData.open2 = false"
      width="90%"
      append-to-body
    >
      <iframe :src="openUrl" width="100%" height="700px" style="border: 0" />
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
a {
  text-decoration: none;
}
</style>
